<template>
  <div>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="订单号" align="center" prop="orderNo">
        <template slot-scope="scope">{{
          scope.row.dataPoolOrder.orderNo
        }}</template>
      </el-table-column>
      <el-table-column label="订单时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.dataPoolOrder.orderTime }}
        </template>
      </el-table-column>
      <el-table-column label="券码号" align="center">
        <template slot-scope="scope">
          {{ scope.row.dataPoolOrder.redeemCode }}
        </template>
      </el-table-column>
      <el-table-column label="订单金额" align="center">
        <template slot-scope="scope">
          {{ scope.row.dataPoolOrder.orderAmount }}
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center">
        <template slot-scope="scope">
          <el-tag type="warng" v-if="scope.row.dataPoolOrder.orderStatus == 0"
            >已取消</el-tag
          >
          <el-tag v-if="scope.row.dataPoolOrder.orderStatus == 1"
            >待支付</el-tag
          >
          <el-tag type="success" v-if="scope.row.dataPoolOrder.orderStatus == 2"
            >已支付</el-tag
          >
          <el-tag type="success" v-if="scope.row.dataPoolOrder.orderStatus == 3"
            >已发货</el-tag
          >
          <el-tag type="danger" v-if="scope.row.dataPoolOrder.orderStatus == 4"
            >确认收货</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="支付方式" align="center">
        <template slot-scope="scope">
          <el-tag type="warng" v-if="scope.row.dataPoolOrder.orderPayType == 0"
            >不需要支付</el-tag
          >
          <el-tag
            type="success"
            v-if="scope.row.dataPoolOrder.orderPayType == 1"
            >现金</el-tag
          >
          <el-tag v-if="scope.row.dataPoolOrder.orderPayType == 2">积分</el-tag>
          <el-tag type="danger" v-if="scope.row.dataPoolOrder.orderPayType == 3"
            >优惠券</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="取消时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.dataPoolOrder.cancelTime }}
        </template>
      </el-table-column>
      <el-table-column label="支付时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.dataPoolOrder.payTime }}
        </template>
      </el-table-column>
      <el-table-column label="发货时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.dataPoolOrder.deliverGoodsTime }}
        </template>
      </el-table-column>
      <el-table-column label="确认收货时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.dataPoolOrder.confirmReceiptTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-info"
            @click="handleDetail(scope.row)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <detail :isDetail.sync="isDetail" :dataRow="dataRow"></detail>
  </div>
</template>
<script>
import { searchInfo } from "@/api/operation/operationSearch";
import detail from "./detail.vue";
export default {
  name: "OrderList",
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    queryParams: {
      type: Object,
      default: () => ({
        pageNum: 1,
        pageSize: 10,
      }),
    },
    total: {
      type: Number,
      default: 0,
    },
    //搜索的条件
    dataPoolDTO: {
      type: Object,
    },
    //订单列表
    list: {
      type: Array,
    },
  },
  components: {
    detail,
  },
  data() {
    return {
      isDetail: false,
      dataRow: {},
    };
  },
  methods: {
    handleDetail(row) {
      this.dataRow = row;
      this.isDetail = true;
    },
    /** 查询用户列表 */
    getList() {
      this.$emit("update:loading", true);

      searchInfo({
        dataPoolDTO: {
          ...this.dataPoolDTO,
          ...this.queryParams,
          searchType: 1,
        },
      }).then((response) => {
        this.$emit("update:list", response.rows);
        this.$emit("update:total", response.total);
        this.$emit("update:loading", false);
      });
    },
  },
};
</script>
